<!-- 模块说明 -->
<template>
    <div>
        <div class="top">
            <div>
                <van-nav-bar title="积分" left-text="" right-text="积分规则" @click-right="showPopup" left-arrow
                    @click-left="onClickLeft" />
            </div>
        </div>
        <div class="center">
            <div class="center_bg">
                <img src="https://img0.baidu.com/it/u=1589707643,755763264&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1083"
                    alt="" />
            </div>
            <div class="center_con">
                <div class="d1">
                    <div class="d2">积分</div>
                    <div class="d3">0</div>
                </div>
            </div>
        </div>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
            <ul style="width: 95% ;margin: 0 auto;">
                <li style="display: flex;justify-content: space-between;align-items: center; margin-top: 10px;">
                    <div>推荐注册</div> <span style="color: #ccad74;">+ 100</span>
                </li>
                <li style="display: flex;justify-content: space-between;align-items: center; margin-top: 10px;">
                    <div>签到</div> <span style="color: #ccad74;">+ 5</span>
                </li>
            </ul>
        </van-popup>
        <div class="bottom">
            <div>
                <div class="d1">积分明细 : </div>
            </div>
            <div class="huadong">
                <ul>
                    <li>
                        <div class="same">
                            <div>
                                <div style="margin-bottom: 5px; margin-top: 3px;">
                                    签到
                                </div>
                                <div style="color: #a1a1a1">
                                    2011-1-1&nbsp;12:34:56
                                </div>
                            </div>
                            <span style="color: #ccad74">+ 5</span>
                        </div>
                    </li>
                    
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const onClickLeft = () => history.back();
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
</script>

<style lang="scss" scoped>
.top {
    height: 7vh;
}

.center {
    .center_bg {
        // z-index: 1;
        // height: 230px;
        position: fixed;
        width: 100vw;

        img {
            z-index: 1;
            width: 100%;
            // height: 230px;
            filter: blur(40px);
        }
    }

    .center_con {
        position: absolute;
        width: 89%;
        height: 100px;
        border-radius: 10px;
        // border: 1px solid red;
        background: #fff;
        z-index: 33;
        margin-top: 20px;
        margin-left: 20px;

        .d1 {
            text-align: center;

            .d2 {
                font-size: 18px;
                margin-top: 10px;
            }

            .d3 {
                font-weight: bold;
                font-size: 28px;
                margin-top: 10px;
            }
        }

        .d4 {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 40px;

            .d5 {
                font-size: 18px;
            }

            .d6 {
                font-size: 18px;
                font-weight: bold;
                margin-left: 20px;
                margin-top: 10px;
            }
        }
    }
}

.bottom {
    position: absolute;
    top: 200px;
    left: 0;
    margin-left: 20px;
    width: 89%;

    .huadong {
        overflow: auto;
    }
    

    .d1 {
        font-size: 20px;
        // margin-top: -20px;
        margin-bottom: 10px;
    }

    li {
        background: #fff;
        border-radius: 10px;
        height: 50px;
        margin-bottom: 10px;
       

        .same {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

    }
}
</style>
